<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-06-09 11:50:10
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-06-11 11:29:53
 * @FilePath: \cq-admin\src\views\manager\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="padding">
    <el-form ref="form" :model="form" label-width="80px" class="demo-form-inline" :inline="true">
      <el-form-item label="用户名">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="form.roles" placeholder="请选择角色">
          <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="iniTableList">搜索</el-button>
        <el-button @click="clear">取消</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="_id" label="ID" width="180">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="roles" label="角色">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.roles"
              placeholder="请选择角色"
              :disabled="scope.row.disabled"
              @change="updateRole(scope)"
            >
              <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" />
        <el-table-column label="设置角色">
          <template slot-scope="scope">
            <el-button @click="scope.row.disabled = !scope.row.disabled">{{ scope.row.disabled ? '编辑角色' : "取消编辑"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      :current-page.sync="pagination.pageNumber"
      @current-change="iniTableList"
    />
  </div>
</template>

<script>
import { getManageList, updateManage } from '@/api/manage'
export default {
  data() {
    return {
      tableData: null,
      form: {
        username: '',
        email: '',
        roles: ''
      },
      roles: [
        {
          label: '管理员',
          value: 'admin'
        }, {
          label: '编辑人员',
          value: 'editor'
        }
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 3,
        total: 1
      }
    }
  },
  created() {
    this.iniTableList()
  },
  methods: {
    async iniTableList() {
      const { pageSize, pageNumber } = this.pagination
      const res = await getManageList({ pageSize, pageNumber, ...this.form })
      this.pagination = res.pagination
      res.data.forEach(item => {
        item.disabled = true
      })
      this.tableData = res.data
    },
    clear() {
      this.form = {
        username: '',
        email: '',
        roles: ''
      }
      this.iniTableList()
    },
    async updateRole(val) {
      const { _id: id, roles } = val.row
      try {
        if (roles === '') {
          this.$message(
            {
              type: 'error',
              message: '角色不能为空'
            }
          )
          return false
        }
        await updateManage({ id, roles })
        this.$message({
          type: 'success',
          message: '更新成功'
        })
        this.iniTableList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.padding {
  padding: 20px;
}
</style>
